<template>
  <div class="w-full">
    <div>
      <breadcrumb parentName="我的业绩" childrenName="我的业绩"></breadcrumb>
    </div>
    <div class="w-full bg-white mt-[15px] pt-[10px] relative pb-[60px]">
      <div class="mt-[20px] px-[200px] w-full flex justify-between">
        <div class="flex">
          <el-image
            :src="getAssetsFile('home/touxiang.png')"
            class="w-[80px] h-[80px]"
            fit="fill"
          ></el-image>
          <div class="ml-[34px] h-[80px] flex flex-col justify-between">
            <div>{{ sell_name }}</div>
            <div
              class="w-[60px] h-[30px] flex justify-center items-center border border-[#DEDEDE] rounded-[32px]"
            >
              渠道
            </div>
          </div>
        </div>
        <div class="flex flex-col justify-between items-center h-[80px]">
          <div class="flex">
            <el-image
              :src="getAssetsFile('home/coin.png')"
              class="w-[28px] h-[28px]"
              fit="fill"
            ></el-image>
            <div class="text-[20px] ml-[10px]">总佣金</div>
          </div>
          <div class="text-[#D91F0E] mt-[15px]">
            <span class="text-[32px] font-bold">{{
              order_total ? order_total : "0.00"
            }}</span>
            <span class="text-[20px]">元</span>
          </div>
        </div>
      </div>
      <div class="mt-[30px] border-b"></div>
      <div class="pl-[25px] mt-[20px]">
        <div class="flex items-center">
          <div class="w-[4px] h-[16px] bg-[#EF6800]"></div>
          <div class="ml-[20px] text-[#000000] font-medium">数据统计</div>
        </div>
        <div class="pl-[10px] flex mt-[30px]">
          <div>时间:</div>
          <div class="flex items-center mr-[20px] ml-[20px]">
            <el-date-picker
              placeholder="请选择开始时间"
              v-model="param.stime"
              type="date"
              value-format="YYYY-MM-DD"
            />
            <div class="mx-[10px]">-</div>
            <el-date-picker
              placeholder="请选择结束时间"
              v-model="param.etime"
              value-format="YYYY-MM-DD"
              type="date"
            />
          </div>
          <el-button color="#ef6800" :dark="true" @click="searchBtn">
            <template #icon>
              <el-icon color="#fff">
                <Search />
              </el-icon>
            </template>
            <template #default>
              <div class="text-[white]">搜索</div>
            </template>
          </el-button>
          <el-button color="#ef6800" :dark="true" @click="reset">
            <template #default>
              <div class="text-[white]">重置</div>
            </template>
          </el-button>
        </div>
        <div class="mt-[20px]">
          <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
            <el-tab-pane label="全部数据" name="全部数据">
              <div class="flex mt-[30px]">
                <div
                  class="w-[383px] h-[122px] rounded-[5px] flex justify-center items-center flex-col mr-[20px]"
                  style="box-shadow: 1px 2px 6px 1px rgba(151, 151, 151, 0.17)"
                >
                  <div class="flex justify-center items-center">
                    <el-image
                      :src="getAssetsFile('home/ach1.png')"
                      class="w-[24px] h-[24px]"
                      fit="fill"
                      :lazy="true"
                    ></el-image>
                    <div class="ml-[15px] text-[18px] font-medium">新增订单</div>
                  </div>
                  <div class="mt-[20px]">
                    <span class="text-[24px] font-medium">{{
                      Info.order_count ? Info.order_count : "0"
                    }}</span>
                    <span class="text-[20px] ml-[5px]">份</span>
                  </div>
                </div>
                <div
                  class="w-[383px] h-[122px] rounded-[5px] flex justify-center items-center flex-col mr-[20px]"
                  style="box-shadow: 1px 2px 6px 1px rgba(151, 151, 151, 0.17)"
                >
                  <div class="flex justify-center items-center">
                    <el-image
                      :src="getAssetsFile('home/ach2.png')"
                      class="w-[24px] h-[24px]"
                      fit="fill"
                      :lazy="true"
                    ></el-image>
                    <div class="ml-[15px] text-[18px] font-medium">订单总保费</div>
                  </div>
                  <div class="mt-[20px]">
                    <span class="text-[24px] font-medium">{{
                      Number(Info.total_price).toFixed(2)
                        ? Number(Info.total_price).toFixed(2)
                        : "0.00"
                    }}</span>
                    <span class="text-[20px] ml-[5px]">元</span>
                  </div>
                </div>
                <div
                  class="w-[383px] h-[122px] rounded-[5px] flex justify-center items-center flex-col mr-[20px]"
                  style="box-shadow: 1px 2px 6px 1px rgba(151, 151, 151, 0.17)"
                >
                  <div class="flex justify-center items-center">
                    <el-image
                      :src="getAssetsFile('home/ach3.png')"
                      class="w-[24px] h-[24px]"
                      fit="fill"
                    ></el-image>
                    <div class="ml-[15px] text-[18px] font-medium">总佣金</div>
                  </div>
                  <div class="mt-[20px]">
                    <span class="text-[24px] font-medium">{{
                      Info.order_total ? Info.order_total : "0.00"
                    }}</span>
                    <span class="text-[20px] ml-[5px]">元</span>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="本月" name="本月">
              <div class="flex mt-[30px]">
                <div
                  class="w-[383px] h-[122px] rounded-[5px] flex justify-center items-center flex-col mr-[20px]"
                  style="box-shadow: 1px 2px 6px 1px rgba(151, 151, 151, 0.17)"
                >
                  <div class="flex justify-center items-center">
                    <img
                      :src="getAssetsFile('home/ach1.png')"
                      class="w-[24px] h-[24px]"
                    />
                    <div class="ml-[15px] text-[18px] font-medium">新增订单</div>
                  </div>
                  <div class="mt-[20px]">
                    <span class="text-[24px] font-medium">{{
                      Info.order_count ? Info.order_count : "0"
                    }}</span>
                    <span class="text-[20px] ml-[5px]">份</span>
                  </div>
                </div>
                <div
                  class="w-[383px] h-[122px] rounded-[5px] flex justify-center items-center flex-col mr-[20px]"
                  style="box-shadow: 1px 2px 6px 1px rgba(151, 151, 151, 0.17)"
                >
                  <div class="flex justify-center items-center">
                    <img
                      :src="getAssetsFile('home/ach2.png')"
                      class="w-[24px] h-[24px]"
                    />
                    <div class="ml-[15px] text-[18px] font-medium">订单总保费</div>
                  </div>
                  <div class="mt-[20px]">
                    <span class="text-[24px] font-medium">{{
                      Number(Info.total_price).toFixed(2)
                        ? Number(Info.total_price).toFixed(2)
                        : "0.00"
                    }}</span>
                    <span class="text-[20px] ml-[5px]">元</span>
                  </div>
                </div>
                <div
                  class="w-[383px] h-[122px] rounded-[5px] flex justify-center items-center flex-col mr-[20px]"
                  style="box-shadow: 1px 2px 6px 1px rgba(151, 151, 151, 0.17)"
                >
                  <div class="flex justify-center items-center">
                    <img
                      :src="getAssetsFile('home/ach3.png')"
                      class="w-[24px] h-[24px]"
                    />
                    <div class="ml-[15px] text-[18px] font-medium">总佣金</div>
                  </div>
                  <div class="mt-[20px]">
                    <span class="text-[24px] font-medium">{{
                      Info.order_total ? Info.order_total : "0.00"
                    }}</span>
                    <span class="text-[20px] ml-[5px]">元</span>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="上个月" name="上个月">
              <div class="flex mt-[30px]">
                <div
                  class="w-[383px] h-[122px] rounded-[5px] flex justify-center items-center flex-col mr-[20px]"
                  style="box-shadow: 1px 2px 6px 1px rgba(151, 151, 151, 0.17)"
                >
                  <div class="flex justify-center items-center">
                    <img
                      :src="getAssetsFile('home/ach1.png')"
                      class="w-[24px] h-[24px]"
                    />
                    <div class="ml-[15px] text-[18px] font-medium">新增订单</div>
                  </div>
                  <div class="mt-[20px]">
                    <span class="text-[24px] font-medium">{{
                      Info.order_count ? Info.order_count : "0"
                    }}</span>
                    <span class="text-[20px] ml-[5px]">份</span>
                  </div>
                </div>
                <div
                  class="w-[383px] h-[122px] rounded-[5px] flex justify-center items-center flex-col mr-[20px]"
                  style="box-shadow: 1px 2px 6px 1px rgba(151, 151, 151, 0.17)"
                >
                  <div class="flex justify-center items-center">
                    <img
                      :src="getAssetsFile('home/ach2.png')"
                      class="w-[24px] h-[24px]"
                    />
                    <div class="ml-[15px] text-[18px] font-medium">订单总保费</div>
                  </div>
                  <div class="mt-[20px]">
                    <span class="text-[24px] font-medium">{{
                      Number(Info.total_price).toFixed(2)
                        ? Number(Info.total_price).toFixed(2)
                        : "0.00"
                    }}</span>
                    <span class="text-[20px] ml-[5px]">元</span>
                  </div>
                </div>
                <div
                  class="w-[383px] h-[122px] rounded-[5px] flex justify-center items-center flex-col mr-[20px]"
                  style="box-shadow: 1px 2px 6px 1px rgba(151, 151, 151, 0.17)"
                >
                  <div class="flex justify-center items-center">
                    <img
                      :src="getAssetsFile('home/ach3.png')"
                      class="w-[24px] h-[24px]"
                    />
                    <div class="ml-[15px] text-[18px] font-medium">总佣金</div>
                  </div>
                  <div class="mt-[20px]">
                    <span class="text-[24px] font-medium">{{
                      Info.order_total ? Info.order_total : "0.00"
                    }}</span>
                    <span class="text-[20px] ml-[5px]">元</span>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="flex items-center mt-[30px]">
          <div class="w-[4px] h-[16px] bg-[#EF6800]"></div>
          <div class="ml-[20px] text-[#000000] font-medium">订单信息</div>
        </div>
        <div class="pr-[30px] mt-[30px] mb-[30px]">
          <el-table
            :data="Info.data"
            border
            style="width: 100%"
            :header-cell-style="{
              background: '#FEF0E6',
              color: '#EF6800',
              'text-align': 'center',
            }"
          >
            <el-table-column props="order_no" label="订单号" align="center">
              <template #default="scope">
                <div class="text-[#EF6800]">{{ scope.row.order_no }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="bd_no" label="保单号" align="center">
              <template #default="scope">
                <div class="text-[#EF6800]">{{ scope.row.bd_no }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="产品名称" align="center" />
            <el-table-column prop="insure_name" label="投保人" align="center" />
            <el-table-column
              prop="total_price"
              label="保费(元)"
              width="152"
              align="center"
            />
            <el-table-column
              prop="start_time"
              label="保障时间"
              width="184"
              align="center"
            >
              <template #default="scope">
                <div>{{ scope.row.start_time }}</div>
                <div>{{ scope.row.end_time }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="state" label="状态" width="116" align="center">
              <template #default="scope">
                <div v-if="scope.row.state == 0" class="text-[#999999]">未生效</div>
                <div v-if="scope.row.state == 1" class="text-[#F00505]">已失效</div>
                <div v-if="scope.row.state == 2" class="text-[#0CB031]">保障中</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="absolute bottom-[0] w-full ml-[-25px]">
          <currentPage
            :current_page="Info.current_page"
            :last_page="Info.last_page"
            :per_page="Info.per_page"
            :total="Info.total"
            :total_price="total_price"
            @back="back"
            @up="up"
            :costShow="false"
          >
          </currentPage>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { Delete, Edit, Search, Share, Upload } from "@element-plus/icons-vue";
import breadcrumb from "@/components/breadcrumb/breadcrumb.vue";
import getAssetsFile from "@/utils/getImageurl.ts";
import { ref, reactive, onMounted, inject } from "vue";
import { achievement, achieve } from "@/utils/api";
import currentPage from "./currentPage.vue";
const activeName = ref("全部数据");
const message = inject("message") as any;
const Info = reactive({
  order_count: "",
  order_total: "",
  total_price: "",
  data: [
    {
      order_no: "",
      bd_no: "",
      total_price: "",
      start_time: "",
      end_time: "",
      name: "",
      insure_name: "",
      state: "",
    },
  ],
  current_page: 1,
  last_page: 1,
  per_page: 3,
  total: 0,
}) as any;
const param = reactive({
  page: 1,
  stime: "",
  etime: "",
  type: 1, //1是全部 2是本月3是上个月
});
const order_total = ref("");
const sell_name = ref("");
const total_price = ref(0);
onMounted(() => {
  getData();
  getAchieve();
});
const getAchieve = async () => {
  const res = await achieve("");
  order_total.value = res.msg.order_total;
  sell_name.value = res.msg.sell_name;
};
const getData = async () => {
  total_price.value = 0;
  const res = await achievement(param);
  for (let i in Info) {
    if (res.msg[i] != "undefined") {
      Info[i] = res.msg[i];
    }
  }
  Info.data.forEach((item: any) => {
    total_price.value += Number(item.total_price);
  });
};
//搜索
const searchBtn = () => {
  if (!param.stime || !param.etime) {
    message.warning("请选择时间");
    return;
  }
  activeName.value = "全部数据";
  getData();
};
const handleClick = (name: string) => {
  activeName.value = name;

  param.page = 1;
  param.stime = "";
  param.etime = "";
  switch (activeName.value) {
    case "全部数据":
      param.type = 1;
      break;
    case "本月":
      param.type = 2;
      break;
    case "上个月":
      param.type = 3;
      break;
    default:
      param.type = 1;
      break;
  }
  getData();
};
const reset = () => {
  param.etime = "";
  param.stime = "";
  param.page = 1;
  param.type = 1;
  activeName.value = "全部数据";
  getData();
};
const back = () => {
  param.page--;
  getData();
};
const up = () => {
  param.page++;
  getData();
};
</script>
<style scoped>
:deep(.el-tabs__content) {
  overflow: visible !important;
}

:deep(.el-tabs__item) {
  color: #ef6800;
}

:deep(.el-tabs__active-bar) {
  background-color: #ef6800;
}
</style>
